<style>
  #loginInput1,#loginInput2{
    padding-left: 34px;
    box-sizing: border-box;
  }
</style>
<template>
  <div class="top_content">
    <div class="top_logo"><img src="../assets/imgs/logo.png"/></div>
    <div class="login_con">
      <div class="lc">
        <div class="title">账号密码登录</div>
        <div class="con">
          <div class="con_tab">
            <span>用户名</span>
            <div class="ct_input">
              <div class="cti_img"></div>
              <el-input id="loginInput1" v-model="userName" placeholder="请输入用户名" @blur="validateUserName" clearable></el-input>
              <div class="showError" v-if="showUNerror != ''">{{showUNerror}}</div>
            </div>
          </div>
          <div class="con_tab">
            <span>密码</span>
            <div class="ct_input">
              <div class="cti_img cti_img2"></div>
              <el-input type="password" id="loginInput2" v-model="password" placeholder="请输入密码" @blur="validatePwd" clearable></el-input>
              <div class="showError" v-if="showPWerror != ''">{{showPWerror}}</div>
            </div>
          </div>
          <el-button type="primary" @click="landing">登录</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
      userName: '',
      showUNerror:'',
      password:'',
      showPWerror:'',
    }
  },
  created(){

  },
  mounted(){

  },
  methods:{
    //验证用户名
    validateUserName(){
      let self = this
      if (self.userName == "" || self.userName == null) {
        self.showUNerror = '用户名不能为空'
        return false;
      }else {
        self.showUNerror = '';
      }
    },
    //验证密码
    validatePwd(){
      let self = this
      if (self.password == "" || self.password == null) {
        this.showPWerror="密码不能为空";
        return false;
      }else{
        this.showPWerror = '';
      }
    },
    //登录
    landing(){
      let self = this
      self.validateUserName();
      self.validatePwd();
      self.$http.post(self.conURL + 'api/authenticate',{
        username:self.userName,
        password:self.password,
        rememberMe:true
      }).then(res => {
        localStorage.setItem('token',res.data.id_token)
        localStorage.setItem('userName',res.data.user.login)
        localStorage.setItem('firstName',res.data.user.firstName)
        localStorage.setItem('department',res.data.user.department)
        localStorage.setItem('leftIndex', 1)
        let authoritiesList = []
        for (let i = 0; i < res.data.user.authorities.length; i++){
          authoritiesList.push(res.data.user.authorities[i].name)
        }
        localStorage.setItem('authoritiesList',JSON.stringify(authoritiesList))
        localStorage.setItem('imgUrl','http://120.26.113.44:7080/mongofileserver/api/file/')
        this.$router.push('/index')
      }).catch(error=>{
        console.log(error)
        this.$notify.error({
          title: '错误',
          message: '登录失败'
        });
      });
    },
  }
}
</script>

<style lang="less">
  .top_content{
    width: 100%;
    height: 100%;
    background: url("../assets/imgs/2-3.png") no-repeat;
    background-size: 100% 100%;
    position: relative;
    box-sizing: border-box;
    .top_logo{
      position: absolute;
      top: 25px;
      left: 25px;
    }
    .login_con{
      position: absolute;
      top: 25%;
      left: 40%;
      width: 368px;
      border: 14px solid rgba(255,255,255,0.45);
      .lc{
        width: 100%;
        height: 100%;
        background: #fafafa;
        .title{
          color: #222222;
          font-size: 18px;
          width: 100%;
          height: 50px;
          line-height: 50px;
          text-align: center;
          border-bottom: 1px solid #e5e5e5;
        }
        .con{
          padding: 20px 29px;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          .con_tab{
            width: 100%;
            display: flex;
            flex-direction: column;
            padding-bottom: 20px;
            span{
              font-size: 14px;
              color: #333;
              font-weight: 600;
              margin-bottom: 13px;
            }
            .ct_input{
              display: flex;
              flex-direction: column;
              position: relative;
              .cti_img{
                width: 14px;
                height: 14px;
                background: url(../assets/imgs/1-2.png) no-repeat;
                background-position: -120px -374px;
                position: absolute;
                left: 13px;
                top: 13px;
                z-index: 1;
              }
              .cti_img2{
                background-position: -120px -406px;
              }
              .showError{
                color: #d2322d;
                font-size: 14px;
                margin-top: 5px;
              }
            }
          }
        }
      }
    }
  }
</style>
